[이지현] Sprint5 #192
[이지현] Sprint5 #192
Conversation
[Fix] delete merged branch github action
…sprint1 [이지현] Sprint1
- 수정: 언어 속성 `<html lang="kr">`에서 `<html lang="ko">`로 변경 - 네비게이션 버튼을 `<button>`에서 `<a>` 태그로 변경하여 웹 접근성 개선 - 이미지 파일 2배수 추출 후 사이즈 조정 및 최적화
- div 태그로 구성된 아이콘들을 ul과 li 태그로 변경하여 의미론적 HTML 구조 개선
- 로그인 폼(이메일, 비밀번호 입력, 로그인 버튼) 추가 - 구글 및 카카오 간편 로그인 아이콘 추가 - 회원가입 페이지(signup.html) 기본 파일 추가
- 전체적인 레이아웃 및 색상 구성 - 아이콘 및 버튼 디자인 추가 - 로그인 폼 및 간편 로그인 섹션 스타일링
- signup.html 작성 및 레이아웃 구성 - 로그인/회원가입 페이지 공통 스타일 적용을 위한 auth.css 수정 - login.html 스타일에 맞춰 ID와 클래스 수정
- 비밀번호 입력란의 아이콘 클래스명을 hide_icon에서 pwd_icon으로 수정 - 클래스명 변경에 따라 관련된 CSS 스타일 적용
…sprint2 [이지현] Sprint2
…, KakaoBg.png -> Kakao.png)
- body에 정의하고 나머지는 inherit 적용
- AuthLayout.jsx로의 마이그레이션 작업 시작 - 로그인 및 회원가입 페이지 컴포넌트 구조 변경 - 일부 CSS 수정 및 반응형 디자인 적용
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
지현님 5번째 미션 작업 고생하셨습니다.
기존 페이지도 옮겨주시느라 더 힘드셨을 것 같아요~
시간 되실때 정리를 조금 더 해주시면 좋을 것 같아요!
다음 미션도 화이팅입니다~
- 전체 상품 영역에서 페이지를 옮길때마다 로딩 컴포넌트가 보이게 되고, 전체 높이가 줄어들며 레이아웃이 덜컹거리네요~ 추후 로딩 영역의 높이를 기존 상품과 같게 해주시거나 skeleton UI로 해주시면 더 자연스러울 것 같아요.
pr 하니까 위에 The head ref may contain hidden characters: "React-\uC774\uC9C0\uD604-sprint5" 이렇게 뜨는데 브랜치에 한글 있어서 그런건가용?:
넵 맞습니다. github는 공식적으로는 영문, 숫자 및 몇가지 특문만으로 브런치명을 생성하기를 권장합니다. 문서
| import BestItems from "./components/BestItems"; | ||
| import AllItems from "./components/AllItems"; |
There was a problem hiding this comment.
💊 제안
다른 곳에 배럴 파일을 만드신 것처럼 components 폴더에도 배럴 파일을 만드시면 구조가 통일감 있고 더 좋을 것 같아요.
| <ul css={BestItemsGridContainer}> | ||
| {displayItems.map((item) => ( | ||
| <li key={item.id}> | ||
| <article css={ItemsContainer}> |
There was a problem hiding this comment.
💊 제안
추후 상세 페이지 제작시 이동할 수 있게 link 태그로 바꿔주세요~
There was a problem hiding this comment.
👍 칭찬
레이아웃에 따라 라우트 구성하신 것 좋습니다~
| ); | ||
|
|
||
| // 응답 인터셉터 | ||
| baseAPI.interceptors.response.use( |
There was a problem hiding this comment.
💬 여담
axios의 interceptor 를 이용해서 실패한 요청에 대한 재시도를 하게 구현하신 점 좋아요.
추후 react-query를 배우시게 되면 이러한 처리를 라이브러리에서 자동으로 해주게 되니 지금 구현해보신 것이 그때 도움이 되실거에요~
axios를 사용할때 재시도 로직에 대해 자세히 적은 글을 첨부하니 나중에 읽어보시면 더 좋겠네요.
| ${disabled && | ||
| css` | ||
| background-color: var(--gray400); | ||
| `} |
There was a problem hiding this comment.
💊 제안
button이 disabled 일 경우, disabled를 인자로 받아 조건부 렌더링을 하시기 보다 &:disabled 로 하시는 것이 더 적절할 것 같아요.
disabled, hover 등의 css로 관리 가능한 상태들은 props보다 css 를 이용해 관리해주세요.
| const getSortedItems = () => { | ||
| if (!Array.isArray(items)) return []; | ||
|
|
||
| const itemsCopy = [...items]; | ||
|
|
||
| if (sortOption === "recent") { | ||
| // 최신순 정렬 (ID 기준으로 내림차순) | ||
| return itemsCopy.sort((a, b) => b.id - a.id); | ||
| } else if (sortOption === "favorite") { | ||
| // 좋아요순 정렬 | ||
| return itemsCopy.sort((a, b) => b.favoriteCount - a.favoriteCount); | ||
| } | ||
|
|
||
| return itemsCopy; | ||
| }; |
There was a problem hiding this comment.
❗️ 수정요청
프론트에서 sortOption 값에 따라 상품 요소를 정렬하도록 작성하셨는데, 이렇게 되면 전체 상품 목록에서 정렬되는 것이 아니라, 불러온 데이터 내에서 정렬하는 것이라 의도한 바와 다르게 동작할거에요!
이런 경우 Products api의 orderBy param을 통해 구현하셔야 합니다.
|
|
||
| const useProducts = (page = 1, pageSize = 10, orderBy = "recent") => { | ||
| const [items, setItems] = useState([]); | ||
| const [loading, setLoading] = useState(true); |
There was a problem hiding this comment.
💊 제안
boolean 타입을 추론할 수 있는 isLoading을 추천드려요~
There was a problem hiding this comment.
💊 제안
하나의 파일이 너무 길어 가독성이 많이 떨어집니다~
컴포넌트를 더 분리하시고 로직도 분리하시면 좋겠네요. 지금의 경우 현 파일에서 header, product 관련 코드, pagination 등 모든 것을 관리하고 있어 파악이 어렵습니다~
|
|
||
| function AllItems() { | ||
| const { isMobile, isTablet } = useScreenSize(); | ||
| const [searchTerm, setSearchTerm] = useState(""); |
There was a problem hiding this comment.
💊 제안
요구사항에는 없었지만 상품 검색기능도 구현하시면 더 좋을 것 같아요!
| css={AllItemsSearchInput} | ||
| /> | ||
| </div> | ||
| <div style={{ position: "relative" }} ref={sortMenuRef}> |
There was a problem hiding this comment.
❗️ 수정요청
꼭 필요한 경우가 아니라면 인라인 스타일 사용 지양해주세요~
4 participants
Repo: https://github.com/two678/15-Sprint-Mission/tree/React-%EC%9D%B4%EC%A7%80%ED%98%84-sprint5
배포사이트: https://pandamaket-jihyun.netlify.app/
요구사항
기본
중고마켓
중고마켓 반응형
베스트 상품
Desktop : 4개 보이기
Tablet : 2개 보이기
Mobile : 1개 보이기
전체 상품
Desktop : 12개 보이기
Tablet : 6개 보이기
Mobile : 4개 보이기
심화
주요 변경사항
스크린샷
베스트상품
전체상품
멘토에게